<template>
<div>
<div id="draw_header">
      <h4 class="colored">可兑换积分</h4>
      <p class="c-txt">{{credit}}</p>
  </div>
  <div style="margin-top:.2rem">
      <div class="list">
          <div class="fl">{{typeName}}账号</div><div class="fr"><input v-model="no" placeholder="请添加账号"></div>
      </div>
      <div class="list">
          <div class="fl">本次兑换</div><div class="fr"><input v-model="amount" type="number" placeholder="请输入兑换数量"></div>
      </div>
      <div class="list" style="padding-bottom: .5rem">
        <p class="c-txt grey">【每天可兑换1次，兑换积分必须是100分的倍数，最低每次兑换3000积分，兑换审核处理如遇到节假日顺延。到账时间请联系客服。
          <span v-if="type==='dt'">兑换大唐积分比例：<span class="colored">100积分=100大唐积分</span></span>
          <span v-if="type==='zr'">兑换中睿积分比例：<span class="colored">100积分=100中睿积分</span></span>
          <span v-if="type==='ylh'">兑换云联惠积分比例：<span class="colored">100积分=50云联惠积分</span></span>。】
        </p>
        <div class="big-btn" :class="{disabled:uploading}" @click="draw">我要兑换</div>
      </div>
  </div>
  <div id="draw_history" v-if="history.length">
      <div class="list">兑换记录</div>
      <table>
          <tr>
              <th>时间</th><th>数目</th><th>事件</th>
          </tr>
          <tr v-for="(h,i) in history" :key="i">
              <td>{{utcToDate(h.created_at)}}</td>
              <td>{{h.amount}}</td>
              <td>{{['申请中','成功','拒绝'][h.status-1]}}</td>
          </tr>
      </table>
  </div>
</div>
</template>
<script>
import { Indicator, Toast } from 'mint-ui'
import request from '../../api/other'
import {utcToDate} from '../../assets/js/utils'
export default {
    name:'drawCredit',
    data(){
        return {
            credit: '',
            type:'',
            history: [{"id":"2","created_at":"1519876600","updated_at":"1519876600","user_id":"200962","type":"1","amount":"1.00","status":"1","account":"www"}],
            no:'',
            amount:'',
            uploading: false,
        }
    },
    computed:{
        typeName() {
            switch(this.type) {
                case 'dt':
                    return '大唐'
                case 'zr':
                    return '中睿'
                case 'ylh':
                    return '云联惠'
            }
        },
        typeId() {
          switch(this.type) {
                case 'dt':
                    return 1
                case 'zr':
                    return 2
                case 'ylh':
                    return 3
            }
        }
    },
    async created(){
        this.type = this.$route.params.type
        const {data} = await request.queryCredit()
        this.credit = data.point
        this.history = (await request.queryHistory()).data.filter(h => h.type == this.typeId)
    },
    methods:{
        async getHistory(){
          this.history = (await request.queryHistory()).data.filter(h => h.type == this.typeId)
        },
        async draw(){
            if(this.uploading) return
            if(!this.no || !this.amount) {
                Toast('请填写账号和金额!')
                return
            }
            // if(this.amount > this.credit) {
            //     Toast('积分不足!')
            //     return
            // }
            this.uploading = true
            const {data, success, msg} = await request.transferCredit({
              type:this.typeId,
              amount:this.amount,
              account:this.no
            })
            this.uploading = false
            if(!success) Toast(msg)
            else {
              this.credit -= this.amount
              this.amount = ''
              this.getHistory()
              Toast('兑换成功!')
            }
        },
        utcToDate(t) {
          return utcToDate(t)
        }
    }
}
</script>
<style lang="less" scoped>
#draw_header{
    text-align: center;
    padding: .58rem;
    background: #fff;
    border-bottom: 1px solid #bbb;
    h4{
        font-size: .7rem;
    }
    p{
        font-size: .55rem;
        margin-top: .2rem;
    }
}
.list{
	width: 100%;
	padding: 0 .4rem;
	min-height: 1rem;
	line-height: 1rem;
	background: #fff;
	border-bottom: 1px solid #ccc;
	font-size: .37rem;
	display: inline-table;
	vertical-align: middle;
    padding-right: .4rem;
    input{
        font-size: .4rem;
       text-align: right;
    }
}
p.grey{
  line-height: .6rem;
  padding: .4rem 0;

}
#draw_history{
    background: #fff;
    margin-top: .2rem;
    table{
        font-size: .3rem;
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        tr{
            height: .8rem;
            line-height: .8rem;
            &:nth-child(2n){
                background: #f5d4c9;
            }
        }
        td{
            text-align: center;
        }
    }
}
</style>


